<!DOCTYPE html>
<head>
	<title>Lists Blocks</title>
	<link rel="stylesheet" href="../../../codebase/webix.css" type="text/css" charset="utf-8">
	<script src="../../../codebase/webix.js" type="text/javascript" charset="utf-8"></script>
	<script src="common/data.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="../common/samples.css">

</head>
<body>

<div id="testA" style='width:900px; height:450px; '></div>


<script type="text/javascript" charset="utf-8">


	webix.ready(function(){
		var orgChart = new webix.ui({
			container:"testA",
			view:"organogram",
			borderless: true,
			select: true,
			type:{
				listMarginX: 20,
				listMarginY: 20
			},
			data: [
				{id:"1", value:"Center Director", data:[
					{ id:"1.1", value:"Research &amp; Development", data:[
						{ id:"1.1.1", value:"Research", $type: "list", data:[
							{ id:"1.1.1.1", value:"- Base research" },
							{ id:"1.1.1.2", value:"- Collaborative research with industries and academia" }
						]},
						{ id:"1.1.2", value:"Development", $type: "list", data:[
							{ id:"1.1.2.1", value:"- Faculty development workshops" },
							{ id:"1.1.2.2", value:"- Student development" }
						]}
					]},
					{ id:"1.2", value:"Teaching &amp Training", data:[
						{ id:"1.2.1", value:"Teaching", $type: "list", data:[
							{ id:"1.2.1.1", value:"- Course development" },
							{ id:"1.2.1.2", value:"- Teaching" }
						]},
						{ id:"1.2.2", value:"Training", $type: "list", data:[
							{ id:"1.2.2.1", value:"- Conduct workshops" },
							{ id:"1.2.2.2", value:"- Conduct seminars" }
						]}
					]}
				]}
			]

		});




	});
</script>
</body>
</html>